      <template>
      	<view class="page-body">
      		<!-- 页面内容开始 -->

      		<!-- 表格搜索组件开始 -->
      		<vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
      			@search="search"></vk-data-table-query>
      		<!-- 表格搜索组件结束 -->

      		<!-- 自定义按钮区域开始 -->
      		<view>
      			<el-row>

      				<el-button type="success" size="small" style="margin-left: 20rpx;"
      					icon="el-icon-circle-plus-outline" @click="batchaddBtn('save')">添加
      				</el-button>
      			</el-row>
      		</view>
      		<!-- 自定义按钮区域结束 -->

      		<!-- 表格组件开始 -->
      		<vk-data-table ref="table1" :action="table1.action" :columns="table1.columns"
      			:query-form-param="queryForm1" :right-btns="table1.rightBtns" :right-btns-more="table1.rightBtnsMore"
      			:row-no="true" :pagination="true" @update="updateBtn" @delete="deleteBtn"
      			@current-change="currentChange" @selection-change="selectionChange"></vk-data-table>
      		<!-- 表格组件结束 -->

      		<!-- 添加或编辑的弹窗开始 -->
      		<vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="700px" mode="form"
      			:close-on-click-modal="false">
      			<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
      				:form-type="form1.props.formType" :columns='form1.props.columns' label-width="130px"
      				@success="form1.props.show = false;refresh();"></vk-data-form>
      		</vk-data-dialog>
      		<!-- 添加或编辑的弹窗结束 -->
      		<!-- 回传方案设置 -->
      		<!-- 		<el-dialog title="设置回传方案" :visible.sync="dialogVisible2" width="1200px" :before-close="handleClose2"
				:destroy-on-close="true" :center="true" :close-on-click-modal="false">
		
			
			</el-dialog> -->


      		<!-- 预览充值面板开始页面-->
      		<el-dialog title="设置回传方案" :visible.sync="dialogVisible9" width="1200px" :before-close="handleClose9"
      			:destroy-on-close="true" :center="true" :close-on-click-modal="false">
      			<el-divider></el-divider>
      			上次修改时间：{{time}}
      			<el-divider></el-divider>

      			<view style="display: flex;align-items: center;">
      				<text style="width: 80px;color: red;">名称</text>
      				<el-input type="text" placeholder="请输入名称" v-model="huichuan.koulianmc"
      					style="margin: 20rpx;height: 60rpx;" />

      			</view>
      			<view style="display: flex;align-items: center;">
      				<text style="width: 80px;">备注</text>
      				<el-input type="text" placeholder="请输入备注信息" v-model="huichuan.koulianbz"
      					style="margin: 20rpx;height: 100rpx;" />

      			</view>

      			<view style="padding: 20px 0;">
      				<el-switch v-model="huichuan.newuser" inactive-text="仅回传当日新用户的订单">
      				</el-switch>
      			</view>

      			<view style="padding: 20px 0;" v-if="!huichuan.newuser">
      				回传用户
      				<vk-data-input-number v-model="huichuan.hour_backhaul" width="100px" :precision="0"
      					placeholder="请输入数字"></vk-data-input-number>小时内的所有充值
      			</view>


      			<!-- 
      			<view class="">
      				<el-switch v-model="huichuan.firstorder" inactive-text="仅回传用户的第一笔订单">
      				</el-switch>
      			</view> -->

      			<el-divider></el-divider>


      			<view style="margin-top: 15px;width: 800px;">
      				<!-- 	<view style="font-size: 15rpx;color: grey;">当选择【循环回传比例】时,左侧值为上报,右侧值为不上报.
      					例:若循环回传比为1:2,就是第1笔上报,第2、3笔不上报,第4笔上报,第5、6笔不上报,如此循环.
      					<br />开启【循环回传比例】时，建议关闭【仅回传当日新用户的订单】，【仅回传用户的第一笔订单】这两项，否则会影响循环比例的准确性
      				</view> -->
      			</view>

      			<view class="container">
      				<view class="jihua">
      					冷启动保护：<text style="color: red;">每个广告计划</text>
      					每日先回传
      					<input type="number" placeholder="" v-model="huichuan.lqdhcbs" />笔

      				</view>
      				<view style="display: flex;">
      					<text style="font-size: 30rpx;">扣量配置：用户在投放链接维度下，按照金额项</text>
      					<button type="primary" @click="addRange"
      						style="width: 120rpx;height: 60rpx;font-size: 10px;margin-left: 40rpx;">+新增</button>
      				</view>
      				<view v-for="(item, index) in amountRanges" :key="index" class="amount-range">
      					<view class="amount-input">

      						<button type="warn" size="mini" @click="deleteRange(index)"
      							style="width: 120rpx;height: 60rpx;font-size: 10px;margin-left: 60rpx;line-height: 60rpx;">删除</button>
      						<view class="amountput">
      							<input type="number" placeholder="" v-model="item.startAmount" />
      							<text>（不包含）元至</text>
      							<input type="number" placeholder="" v-model="item.endAmount" />
      							<text>元（包含）</text>

      						</view>
      					</view>
      					<view class="options">
      						<el-radio-group v-model="item.radio" style="display: flex;align-items: center;">
      							<el-radio :label="1">全部回传</el-radio>
      							<el-radio :label="2">全部不会传</el-radio>
      							<el-radio :label="3">自定义</el-radio>

      							<view class="amountputmm" v-if="item.radio==3">
      								<view style="font-size: 30rpx;">传</view>
      								<input type="number" placeholder="" v-model="item.startnum" />
      								<view style="font-size: 30rpx;">漏</view>
      								<input type="number" placeholder="" v-model="item.endnum" />
      							</view>

      						</el-radio-group>
      					</view>
      				</view>

      			</view>

      			<view style="padding: 2% 20%;">
      				<el-button type="primary" @click="saveRebackPercent">保存</el-button>
      			</view>
      		</el-dialog>
      		<!-- 预览充值面板结束页面 -->

      		<!-- 页面内容结束 -->
      	</view>
      </template>

      <script>
      	var that; // 当前页面对象
      	var vk = uni.vk; // vk实例
      	var originalForms = {}; // 表单初始化数据
      	const db = uniCloud.database();
      	export default {
      		data() {
      			// 页面数据变量
      			return {
      				time: "",
      				nid: 0,
      				amountRanges: [{
      					startAmount: 0,
      					endAmount: 99999,
      					radio: 1,
      					startnum: 0,
      					endnum: 0,
      					proportion_value: 0,
      				}],
      				huichuan: {
      					lqdhcbs: 0,
      					hour_backhaul: 24,
      					douyinRadio: 1,
      					newuser: false,
      					koulianbz: "",
      					koulianmc: '',

      					last_time: 0
      				},
      				dialogVisible9: false,
      				// 页面是否请求中或加载中
      				loading: false,
      				// init请求返回的数据
      				data: {
      					preview_recharge_plan: []
      				},
      				// 表格相关开始 -----------------------------------------------------------
      				table1: {
      					rightBtns: [

      						{
      							mode: 'delete',
      							title: '删除',
      							disabled: (item) => {
      								return item.username == 'admin'
      							}
      						},
      						'more'
      					],
      					rightBtnsMore: [{
      						title: '查看扣量方案',
      						disabled: (item) => {
      							//控制该按钮对哪些数据生效
      							// return item._id == '63c54f03819ce8640cced33f'
      						},
      						onClick: (item) => {
      							console.log("获取回传的item", item);
      							this.dialogVisible9 = true;
      							this.agentId = item.agentId; //把代理商邀请码固定到本地
      							this.setCallback(item)
      							// console.log(this.huichuan);
      						}
      					}, ],
      					// 表格数据请求地址
      					action: "agent/setting/kh/getklmb",
      					// 表格字段显示规则
      					columns: [

      						{
      							"key": "koulianmc",
      							"title": "扣量方案名称",
      							"type": "text",
      							"width": 250,
      						},
      						{
      							key: "koulianbz",
      							title: "扣量方案备注",
      							type: "text",
      							"width": 250,
      						},
      						{
      							"key": "_id",
      							"title": "模板id",
      							"type": "",
      							"width": 300,
      						},



      						{
      							key: "",
      							title: "小程序信息",
      							type: "group",
      							minWidth: 180,
      							align: "left",
      							columns: [{
      									"key": "username",
      									"title": "代理商用户名",
      									"type": "text",
      									"width": 250,
      								},
      								{
      									key: "nickname",
      									title: "代理商昵称",
      									type: "text",
      									defaultValue: "未绑定"
      								},
      							],
      						},
      						// {
      						// 	key: "",
      						// 	title: "小程序信息",
      						// 	type: "Array<object>",
      						// 	minWidth: 180,
      						// 	align: "left",
      						// 	columns: [{
      						// 			"key": "firstorder",
      						// 			"title": "代理商用户名",
      						// 			"type": "text",
      						// 			"width": 250,
      						// 		},
      						// 		{
      						// 			key: "firstorder",
      						// 			title: "代理商昵称",
      						// 			type: "text",
      						// 			defaultValue: "未绑定"
      						// 		},
      						// 	],
      						// },
      						{
      							"key": "_add_time",
      							"title": "添加时间",
      							"type": "time",
      							"width": 180,
      							"sortable": "custom"
      						},

      					],
      					// 多选框选中的值
      					multipleSelection: [],
      					// 当前高亮的记录
      					selectItem: ""
      				},
      				// 表格相关结束 -----------------------------------------------------------
      				// 表单相关开始 -----------------------------------------------------------
      				// 查询表单请求数据
      				queryForm1: {
      					// 查询表单数据源，可在此设置默认值
      					formData: {

      					},
      					// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
      					columns: [{
      							"key": "_id",
      							"title": "模板ID",
      							"type": "text",
      							"width": 250,
      							"mode": "="
      						},
      						{
      							"key": "koulianmc",
      							"title": "扣量方案名称",
      							"type": "text",
      							"width": 250,
      							"mode": "%%"
      						}, {
      							key: "koulianbz",
      							title: "扣量方案备注",
      							type: "text",
      							"width": 350,
      							"mode": "%%"
      						},
      					]
      				},
      				form1: {
      					// 表单请求数据，此处可以设置默认值
      					data: {
      						item: {
      							huichuan: this.huichuan,
      							amountRanges: this.amountRanges

      						}

      					},
      					// 表单属性
      					props: {
      						// 表单请求地址
      						action: "",
      						// 表单字段显示规则
      						columns: [



      						],
      						// 表单验证规则
      						rules: {

      						},
      						// add 代表添加 update 代表修改
      						formType: "",
      						// 是否显示表单的弹窗
      						show: false
      					}
      				},
      				// 其他弹窗表单
      				formDatas: {},
      				// 表单相关结束 -----------------------------------------------------------
      			};
      		},
      		// 监听 - 页面每次【加载时】执行(如：前进)
      		onLoad(options = {}) {
      			that = this;
      			vk = that.vk;
      			that.options = options;
      			that.init(options);
      		},
      		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
      		onReady() {},
      		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
      		onShow() {},
      		// 监听 - 页面每次【隐藏时】执行(如：返回)
      		onHide() {},
      		// 函数
      		methods: {
      			deleteRange(index) {
      				// 删除指定索引的金额范围组
      				this.amountRanges.splice(index, 1);
      			},
      			addRange() {
      				// 添加新的金额范围组
      				this.amountRanges.push({
      					startAmount: 0,
      					endAmount: 99999,
      					radio: 1,
      					startnum: 0,
      					endnum: 0,
      					proportion_value: 0
      				});

      				console.log("555", this.amountRanges);
      			},
      			handleClose9() {
      				this.dialogVisible9 = false;
      			},
      			// 页面数据初始化函数
      			init(options) {
      				originalForms["form1"] = vk.pubfn.copyObject(that.form1);
      			},
      			// 页面跳转
      			pageTo(path) {
      				vk.navigateTo(path);
      			},
      			// 表单重置
      			resetForm() {
      				vk.pubfn.resetForm(originalForms, that);
      			},
      			// 搜索
      			search() {
      				that.$refs.table1.search();
      			},
      			// 刷新
      			refresh() {
      				that.$refs.table1.refresh();
      			},
      			// 获取当前选中的行的数据
      			getCurrentRow() {
      				return that.$refs.table1.getCurrentRow();
      			},
      			// 监听 - 行的选中高亮事件
      			currentChange(val) {
      				that.table1.selectItem = val;
      			},
      			// 当选择项发生变化时会触发该事件
      			selectionChange(list) {
      				that.table1.multipleSelection = list;
      			},
      			// 显示添加页面
      			addBtn() {
      				that.resetForm();
      				that.form1.props.action = 'admin/pages/kh/yhsj/czmb/add';
      				that.form1.props.formType = 'add';
      				that.form1.props.title = '添加';
      				that.form1.props.show = true;
      			},
      			// 显示修改页面
      			updateBtn({

      				item


      			}) {
      				that.form1.props.action = 'agent/setting/kh/updateklmb';
      				that.form1.props.formType = 'update';
      				that.form1.props.title = '编辑';
      				that.form1.props.show = true;
      				// huichuan: this.huichuan,
      				// amountRanges: this.amountRanges
      				// console.log("item", item);
      				// this.huichuan = item.amountRanges
      				// this.amountRanges = item.amountRanges


      				that.form1.data = item;
      			},
      			// 删除按钮
      			deleteBtn({
      				item,
      				deleteFn
      			}) {
      				console.log("itemitem", item);
      				deleteFn({
      					action: "agent/setting/kh/delectklmb",
      					data: {
      						_id: item._id
      					},
      				});
      			},
      			batchaddBtn() {
      				that.resetForm();
      				this.huichuan = {
      					lqdhcbs: 0,
      					hour_backhaul: 0,
      					douyinRadio: 1,
      					newuser: true,
      					koulianbz: "",
      					koulianmc: '',
      				}
      				this.amountRanges = [{
      					startAmount: 0,
      					endAmount: 99999,
      					radio: 1,
      					startnum: 0,
      					endnum: 0,
      					proportion_value: 0
      				}]

      				this.dialogVisible9 = true;
      			},
      			async setCallback(item) {
      				// console.log("22222222222222222222222222",item._id);
      				let huichuans = await db.collection('a_klmb').where({
      					_id: item._id
      				}).get()
      				console.log("11111111111111111", huichuans.result.data[0]);
      				this.nid = item._id || 0
      				this.time = huichuans.result.data[0].update_date
      				this.huichuan = huichuans.result.data[0].huichuana
      				this.amountRanges = huichuans.result.data[0].amountRanges

      			},
      			// 保存回传比例
      			saveRebackPercent() {
      				console.log("项目id", this.nid);
      				if (this.huichuan.koulianmc) {
      					vk.callFunction({
      						url: 'agent/setting/kh/addklmb',
      						title: '请求中...',
      						data: {
      							nid: this.nid || 0,
      							huichuan: this.huichuan,
      							amountRanges: this.amountRanges

      						},
      						success: (data) => {
      							this.$message({
      								message: '添加成功',
      								type: 'success'
      							});
      							this.nid = 0
      							this.dialogVisible9 = false;
      							window.location.reload(true);

      						}
      					});

      				} else {
      					this.$message({
      						message: '卡点名称不能为空',
      						type: 'error'
      					});


      				}



      				// vk.callFunction({
      				// 	url: 'agent/setting/kh/RebackPercent',
      				// 	title: '请求中...',
      				// 	data: {
      				// 		type: "save",
      				// 		tfid: this.tfid,
      				// 		huichuan: this.huichuan,
      				// 		amountRanges: this.amountRanges
      				// 	},
      				// 	success: (data) => {
      				// 		this.$message({
      				// 			message: '保存成功',
      				// 			type: 'success'
      				// 		});
      				// 		this.dialogVisible9 = false;
      				// 	}
      				// });

      			},
      			// 监听 - 批量操作的按钮点击事件
      			batchBtn(index) {
      				switch (index) {
      					case 1:
      						vk.toast("批量操作按钮1");
      						break;
      					case 2:
      						vk.toast("批量操作按钮2");
      						break;
      					default:
      						break;
      				}
      			}
      		},
      		// 监听属性
      		watch: {

      		},
      		// 过滤器
      		filters: {

      		},
      		// 计算属性
      		computed: {

      		}
      	};
      </script>
      <style lang="scss" scoped>
      	.page-body {}

      	.floating-image {
      		position: absolute;
      		right: -45rpx;
      		bottom: -70rpx;
      		width: 230rpx;
      		/* 这里的宽高可以决定手指的大小 */
      		height: 230rpx;
      		/* 这里的宽高可以决定手指的大小 */
      		z-index: 99999;
      	}

      	.boxTemplate {
      		width: 800rpx;
      		margin: 0 auto;
      		display: flex;
      		flex-wrap: wrap;

      		.Scheme {
      			width: 350rpx;
      			height: 180rpx;
      			margin: 20rpx 0;

      			.Schemecontent {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 12rpx;
      				margin: 0 auto;
      				position: relative;
      				background-image: url("@/static/tehui.png");
      				background-size: 100% 180rpx;

      				view {
      					position: absolute;
      				}

      				.Judge {
      					padding: 0px 40rpx;
      					text-align: center;
      					color: #e5563b;
      					background-image: url("@/static/tehuis.png");
      					background-size: 100% 100%;
      					border-radius: 12rpx 0 12rpx 0;
      					font-size: 26rpx;
      					font-weight: 600;
      				}

      				.RechargeAmount {
      					font-weight: 600;
      					font-size: 36rpx;
      					left: 5%;
      					top: 25%;
      				}

      				.GiveBean {
      					padding: 0 20rpx;
      					font-size: 24rpx;
      					font-weight: 600;
      					background-color: #f55125;
      					color: #fff;
      					border-radius: 50rpx;
      					left: 40%;
      					top: 29%;
      				}

      				.RechargeText {
      					font-size: 28rpx;
      					font-weight: 600;
      					left: 8%;
      					bottom: 23%;
      				}

      				.PercentageUser {
      					color: #e37f75;
      					font-size: 24rpx;
      					font-weight: 600;
      					right: 20rpx;
      					bottom: 10rpx;
      				}
      			}

      			.Schemecontents {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 12rpx;
      				margin: 0 auto;
      				background-color: #ebebeb;
      				position: relative;

      				view {
      					position: absolute;
      				}


      				.RechargeAmount {
      					font-weight: 600;
      					font-size: 36rpx;
      					left: 3%;
      					top: 20%;
      				}

      				.GiveBean {
      					padding: 0rpx 20rpx;
      					font-size: 24rpx;
      					font-weight: 600;
      					background-color: #f55125;
      					color: #fff;
      					border-radius: 50rpx;
      					left: 38%;
      					top: 24%;
      				}

      				.RechargeText {
      					font-size: 24rpx;
      					font-weight: 600;
      					left: 5%;
      					bottom: 20%;
      				}
      			}

      			.Schemecontentss {
      				width: 94%;
      				height: 180rpx;
      				border-radius: 14rpx;
      				margin: 0 auto;
      				position: relative;
      				background-image: url("@/static/huiyuan.png");
      				background-size: 100% 180rpx;

      				view {
      					position: absolute;
      				}

      				.Judge {
      					padding: 0px 40rpx;
      					text-align: center;
      					color: #e5563b;
      					background-color: #fafc43;
      					border-radius: 12rpx 0 12rpx 0;
      					font-size: 26rpx;
      					font-weight: 600;
      				}

      				.RechargeAmount {
      					color: #ffffff;
      					font-weight: 600;
      					font-size: 32rpx;
      					left: 5%;
      					top: 25%;
      				}

      				.RechargeText {
      					color: #f2e4d8;
      					font-size: 28rpx;
      					font-weight: 500;
      					left: 5%;
      					bottom: 20%;
      				}

      			}
      		}
      	}

      	.container {
      		display: flex;
      		flex-direction: column;
      		// align-items: center;
      		padding: 20upx;
      	}

      	.amount-range {
      		width: 100%;
      		display: flex;
      		align-items: center;

      	}

      	.amount-input {
      		display: flex;
      		align-items: center;

      	}

      	.amountput {
      		//    		width: 200upx;
      		//    		height: 80upx;
      		//    		border: 1px solid #ccc;
      		display: flex;
      		text-align: center;
      		align-items: center;
      		// margin-right: 10upx;
      	}

      	.amountput input {
      		width: 200upx;
      		height: 80upx;
      		border: 1px solid #ccc;
      		display: flex;
      		margin: 40rpx;
      		text-align: center;
      		// margin-right: 10upx;
      	}

      	.amountputmm {
      		display: flex;
      		text-align: center;
      		align-items: center;

      	}

      	.amountputmm input {
      		width: 100upx;
      		height: 40upx;
      		border: 1px solid #ccc;
      		display: flex;
      		margin: 40rpx;
      		text-align: center;
      		// margin-right: 10upx;
      	}

      	.jihua {
      		display: flex;
      		align-items: center;
      	}

      	.jihua input {
      		width: 100upx;
      		height: 40upx;
      		border: 1px solid #ccc;
      		text-align: center;
      		display: flex;
      		margin: 40rpx;
      		// text-align: center;
      		// margin-right: 10upx;
      	}


      	.options {
      		display: flex;
      		justify-content: space-around;
      		align-items: center;
      		margin-left: 20rpx;

      	}

      	.option {
      		padding: 10upx 20upx;
      		border: 1px solid #ccc;
      		border-radius: 5upx;
      	}

      	.option.selected {
      		background-color: #ccc;
      	}

      	button {
      		width: 300upx;
      	}
      </style>